<route lang="jsonc" type="page">
    {
      "layout": "default",
      "style": {
        "navigationBarTitleText": "药品订单",
        "navigationBarBackgroundColor":'#fff'
      }
    }
    </route>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { getMedicineOrderList } from '@/api/medicineorder'
import {
  IGetMedicineOrderListRequest,
  IMedicineOrderListItem
} from '@/api/types/medicineorder'

// 订单列表数据
const orderList = ref<IMedicineOrderListItem[]>([])
// 加载状态
const loading = ref(false)
// 分页参数
const currentPage = ref(1)
const pageSize = ref(10)
// 总记录数
const total = ref(0)
// 总页数
const pageTotal = ref(0)
// 当前选中的状态
const activeStatus = ref('')
// 订单状态选项
const statusOptions = [
  { id: '', name: '全部' },
  { id: '10', name: '待支付' },
  { id: '11', name: '待发货' },
  { id: '12', name: '待收货' },
  { id: '13', name: '已完成' },
]

// 获取订单列表数据
const fetchOrderList = async () => {
  loading.value = true
  try {
    const params: IGetMedicineOrderListRequest = {
      current: currentPage.value.toString(),
      pageSize: pageSize.value.toString(),
      status: activeStatus.value || undefined
    }
    const res = await getMedicineOrderList(params)
    if (res.code === 10000) {
      orderList.value = res.data.rows || []
      total.value = res.data.total || 0
      pageTotal.value = res.data.pageTotal || 0
    } else {
      console.error('获取药品订单列表失败:', res.message)
    }
  } catch (error) {
    console.error('获取药品订单列表异常:', error)
  } finally {
    loading.value = false
  }
}

// 切换状态
const changeStatus = (status: string) => {
  activeStatus.value = status
  currentPage.value = 1
  fetchOrderList()
}

// 分页变化
const handlePageChange = (page: number) => {
  currentPage.value = page
  fetchOrderList()
}

// 继续支付
const continuePayment = (orderId: string) => {
  console.log('继续支付:', orderId)
  // 实际项目中跳转到支付页面
  // uni.navigateTo({ url: `/pages/pay/index?id=${orderId}` })
}

// 取消订单
const cancelOrder = (orderId: string) => {
  console.log('取消订单:', orderId)
  // 实际项目中调用取消订单API
  // showConfirmDialog().then(() => {
  //   // 调用取消订单接口
  // })
}

// 页面加载时获取数据
onMounted(() => {
  fetchOrderList()
})
</script>

<template>
  <view class="order-container">
    <!-- 状态选项卡 -->
    <view class="status-tabs">
      <view
        v-for="item in statusOptions"
        :key="item.id"
        :class="{ 'active': activeStatus.value === item.id }"
        @click="changeStatus(item.id)"
      >
        {{ item.name }}
      </view>
    </view>

    <!-- 订单列表 -->
    <view class="order-list">
      <view v-for="item in orderList" :key="item.id" class="order-item">
        <!-- 订单头部 -->
        <view class="order-header">
          <view class="order-no">订单编号 {{ item.orderNo }}</view>
          <view class="order-status" :class="{'status-pending': item.status === '10', 'status-shipping': item.status === '11', 'status-delivered': item.status === '12', 'status-completed': item.status === '13'}">
            {{ item.statusValue }}
          </view>
        </view>

        <!-- 商品列表 -->
        <view class="product-list">
          <view v-for="product in item.medicines" :key="product.id" class="product-item">
            <view class="product-image">
              <image :src="product.avatar || '/static/default-img.png'" mode="aspectFill"></image>
            </view>
            <view class="product-info">
              <view class="product-name">{{ product.name }}</view>
              <view class="product-specs">{{ product.specs }}</view>
              <view v-if="product.prescriptionFlag === '1'" class="prescription-tag">处方药</view>
              <view class="product-price">¥{{ product.amount }}</view>
            </view>
            <view class="product-quantity">x{{ product.quantity }}</view>
          </view>
        </view>

        <!-- 订单底部 -->
        <view class="order-footer">
          <view class="order-summary">
            <text>共{{ item.medicines.length }}件商品</text>
            <text>合计: <span class="total-price">¥{{ item.actualPayment }}</span></text>
            <text v-if="item.expressFee > 0">运费: ¥{{ item.expressFee }}</text>
          </view>
          <view class="order-actions">
            <template v-if="item.status === '10'">
              <button class="cancel-btn" @click="cancelOrder(item.id)">取消订单</button>
              <button class="pay-btn" @click="continuePayment(item.id)">继续支付</button>
            </template>
            <template v-else-if="item.status === '11'">
              <button class="track-btn">查看物流</button>
            </template>
            <template v-else-if="item.status === '12'">
              <button class="confirm-btn">确认收货</button>
            </template>
            <template v-else-if="item.status === '13'">
              <button class="detail-btn">查看详情</button>
            </template>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-if="orderList.length === 0 && !loading" class="empty-state">
      <text>暂无订单记录</text>
    </view>

    <!-- 加载中 -->
    <view v-if="loading" class="loading-state">
      <uni-loading></uni-loading>
      <text>加载中...</text>
    </view>

    <!-- 分页 -->
    <view v-if="pageTotal > 1" class="pagination">
      <uni-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        @change="handlePageChange"
      ></uni-pagination>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.order-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.status-tabs {
  display: flex;
  overflow-x: auto;
  padding: 10rpx 0;
  width: 100vw;
  margin-bottom: 20rpx;
  background-color: #fff;
  margin-left: -16rpx;
  margin-top: -23rpx;
//   border-radius: 10rpx;
}

.status-tabs view {
  flex: 1;
  text-align: center;
  padding: 16rpx 0;
  font-size: 28rpx;
  white-space: nowrap;
}

.status-tabs view.active {
  color: #1989fa; /* 改为更明显的蓝色 */
  font-weight: bold;
  position: relative;
}

.status-tabs view.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40rpx;
  height: 6rpx;
  background-color: #1989fa; /* 取消注释，启用背景色 */
  border-radius: 3rpx;
  /* border: 2px solid #1989fa; */ /* 注释掉边框，避免冲突 */
  display: block; /* 取消注释，确保显示 */
}

.order-list {
  gap: 20rpx;
}

.order-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  font-size: 28rpx;
}

.order-no {
  color: #333;
}

.order-status {
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  font-size: 26rpx;
}

.status-pending {
  color: #FF7D00;
  background-color: #FFF7E6;
}

.status-shipping {
  color: #1989fa;
  background-color: #E8F3FF;
}

.status-delivered {
  color: #07C160;
  background-color: #E6FFF2;
}

.status-completed {
  color: #909399;
  background-color: #F7F8FA;
}

.product-list {
  margin-bottom: 20rpx;
}

.product-item {
  display: flex;
  padding: 16rpx 0;
  border-bottom: 1rpx solid #F2F3F5;
}

.product-item:last-child {
  border-bottom: none;
}

.product-image {
  width: 160rpx;
  height: 160rpx;
  margin-right: 20rpx;
  background-color: #F5F5F5;
  border-radius: 12rpx;
  overflow: hidden;
}

.product-image image {
  width: 100%;
  height: 100%;
}

.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-name {
  font-size: 28rpx;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-specs {
  font-size: 26rpx;
  color: #606266;
}

.prescription-tag {
  display: inline-block;
  background-color: #E8F3FF;
  color: #1989fa;
  font-size: 22rpx;
  padding: 4rpx 12rpx;
  border-radius: 16rpx;
  margin-top: 8rpx;
}

.product-price {
  font-size: 28rpx;
  color: #F5222D;
  font-weight: bold;
}

.product-quantity {
  font-size: 26rpx;
  color: #606266;
  align-self: flex-end;
}

.order-footer {
  margin-top: 20rpx;
}

.order-summary {
  text-align: right;
  font-size: 28rpx;
  margin-bottom: 20rpx;
}

.total-price {
  color: #F5222D;
  font-weight: bold;
}

.order-actions {
  display: flex;
  justify-content: flex-end;
  gap: 16rpx;
}

.order-actions button {
  font-size: 26rpx;
  padding: 0 24rpx;
  height: 60rpx;
  line-height: 60rpx;
  border-radius: 30rpx;
}

.cancel-btn {
  background-color: #f5f5f5;
  color: #606266;
}

.pay-btn {
  background-color: #1989fa;
  color: #fff;
}

.track-btn,
.confirm-btn,
.detail-btn {
  background-color: #1989fa;
  color: #fff;
}

.empty-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 300rpx;
  color: #909399;
  font-size: 28rpx;
}

.loading-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 300rpx;
}

.pagination {
  margin-top: 30rpx;
  display: flex;
  justify-content: center;
}
</style>